<template>
    <div class="Index">
       <div class="header">
           <div class="headerimg">
               <input type="text" v-model="tt" @input="btn">
           </div>
       </div>
        <div class="main">
            <div class="main_Iofont">
              
            <!-- //图标、 -->
            <span>
               <a href=""><img src="@/img/1.jpg" alt=""></a>
            <span>网红打卡</span>  
            </span>
            <span><a href=""><img src="@/img/2.jpg" alt=""></a>
            <span>网红打卡</span></span>
            <span><a href=""><img src="@/img/3.jpg" alt=""></a>
            <span>网红打卡</span></span>
            <span><a href=""><img src="@/img/4.jpg" alt=""></a>
            <span>网红打卡</span></span>
            <span>  <a href=""><img src="@/img/1.jpg" alt=""></a>
            <span>网红打卡</span></span>
             <span>
               <a href=""><img src="@/img/1.jpg" alt=""></a>
            <span>网红打卡</span>  
            </span>
            <span><a href=""><img src="@/img/2.jpg" alt=""></a>
            <span>网红打卡</span></span>
            <span><a href=""><img src="@/img/3.jpg" alt=""></a>
            <span>网红打卡</span></span>
            <span><a href=""><img src="@/img/4.jpg" alt=""></a>
            <span>网红打卡</span></span>
            <span>  <a href=""><img src="@/img/1.jpg" alt=""></a>
            <span>网红打卡</span></span>
           
             
             
             
           
            </div>
            <!-- //轮播图 -->
            <div class="car">
                <Car/>
            </div>
            <!-- //滑动 -->
            <h2>北京必玩</h2>
            <div class="scrolll">
               
                <div class="ty" v-for="v in $store.state.list" :key="v.id" @click="DETAIL(v.id)">
                    
                     <dl>
                     <dt><img :src="v.img" alt=""></dt>
                     <dd>
                         <p>{{v.title}}</p>
                         <p>{{v.word}}</p>
                         <p><van-rate
                       v-model="value"
                       :size="25"
                     color="#ffd21e"
                 void-icon="star"
                  void-color="#eee"
/></p>
                     </dd>
                 </dl>
                </div>
                
            </div>
               <h2>品牌旗舰店</h2>
            <div class="scrolll">
               
                <div class="ty" v-for="v in $store.state.list" :key="v.id"  @click="DETAIL(v.id)">
                    
                     <dl>
                     <dt><img :src="v.img" alt=""></dt>
                     <dd>
                         <p>{{v.title}}</p>
                         <p>{{v.word}}</p>
                     </dd>
                 </dl>
                </div>
                
            </div>
        </div>
        <div class="footer">
            <router-link to="/index">首页</router-link>
             <router-link to="/detail">分类</router-link>
            <router-link to="/index">我的</router-link>
        </div>
    </div>
</template>
<script>
import Car from "../components/car"
export default {
    components:{
        Car
    },
    data(){
        return{
         value:6,
         tt:''
        }
    },
    methods:{
        DETAIL(id){
           this.$router.push(`/detail/${id}`)
        },
        btn(){
            this.$store.dispatch('getLogin',{tt:this.tt})
            console.log(this.tt);
            
        }
    },
    created(){
        this.$store.dispatch('getList')
    }
}
</script>
<style lang="css" scoped>
   .Index{
       width: 100%;
       height: 100%;
       overflow: hidden;
       display: flex;
       flex-direction: column;
   } 
   .header{
       width: 100%;
      
       
       
   }
   .main_Iofont span{
       width: 20%;
   }
   .main_Iofont{
       width: 100%;
       flex-wrap: wrap;
       margin-top: 16px;
      display: flex;
      justify-content: space-between;
   }
   .main_Iofont img{
       display: block;
       width: 60px;
       height: 60px;
       border-radius: 50%;
   }
   .scrolll{
       width: 100%;
       /* height: 100%; */
       margin-top: 5px;
       margin-bottom: 5px;
       display: flex;
       overflow-x: scroll;
       
   }
     .ty{
         margin-top: 20px;
         width: 100%;
         height: 100%;
     }
   .ty img{
       width: 200px;
       height: 200px;
       padding: 0 5px;
   }
   .headerimg{
       text-align: center;
       width: 100%;
      background-image: url('https://img1.baidu.com/it/u=686675228,2481849275&fm=26&fmt=auto&gp=0.jpg');
       height: 100px;
   }
   .headerimg input{
       margin-top: 5px;
       width: 300px;
       height: 30px;
       border-radius: 30px;
   }
  
   .main{
       flex: 1;
       overflow-y: scroll;
   }
   .car{
       margin-top: 5px;
   }
   .footer{
       width: 100%;
       height: 40px;
       display: flex;
       justify-content: space-around;
       align-items: center;
       background: skyblue;
   }
   
</style>